<template>
  <div class="clock_item">
    <div class="l_1 l_s" :class="l_1.indexOf(clockNumber)>=0?'active':''"></div> <!-- 4 5 6 8 9 0 -->
    <div class="l_2 l_h" :class="l_2.indexOf(clockNumber)>=0?'active':''"></div> <!-- 2 3 5 6 7 8 9 0 -->
    <div class="l_3 l_s" :class="l_3.indexOf(clockNumber)>=0?'active':''"></div> <!-- 1 2 3 4 7 8 9 0 -->
    <div class="l_4 l_h" :class="l_4.indexOf(clockNumber)>=0?'active':''"></div> <!-- 2 3 4 5 6 8 9 -->
    <div class="l_5 l_s" :class="l_5.indexOf(clockNumber)>=0?'active':''"></div> <!-- 2 6 8 0 -->
    <div class="l_6 l_h" :class="l_6.indexOf(clockNumber)>=0?'active':''"></div> <!-- 2 3 5 6 8 9 0 -->
    <div class="l_7 l_s" :class="l_7.indexOf(clockNumber)>=0?'active':''"></div> <!-- 1 3 4 5 6 7 8 9 0 -->
  </div>
</template>

<script>
  export default {
    name: "clock_item",
    props: {
      clockNumber: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        l_1: [4,5,6,8,9,0],
        l_2: [2,3,5,6,7,8,9,0],
        l_3: [1,2,3,4,7,8,9,0],
        l_4: [2,3,4,5,6,8,9],
        l_5: [2,6,8,0],
        l_6: [2,3,5,6,8,9,0],
        l_7: [1,3,4,5,6,7,8,9,0]
      }
    },
    created() {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .clock_item {
    width: 100%;
    height: 100%;
    position: relative;
    .l_s{
      width: 2px;
      height: 8px;
      border-radius: 2px;
      background: #333;
      position: absolute;
    }
    .l_h{
      width: 8px;
      height: 2px;
      border-radius: 2px;
      background: #333;
      position: absolute;
    }
    .l_s.active,
    .l_h.active{
      background: #fff;
    }
    .l_1{
      top: 5px;
      left: 2px;
    }
    .l_2{
      top: 3px;
      left: 4px;
    }
    .l_3{
      top: 5px;
      right: 2px;
    }
    .l_4{
      top: 13px;
      left: 4px;
    }
    .l_5{
      top: 15px;
      left: 2px;
    }
    .l_6{
      top: 23px;
      left: 4px;
    }
    .l_7{
      top: 15px;
      right: 2px;
    }
  }
</style>
